<template>
  <el-dialog
    title="流程附件列表"
    :visible="visible"
    width="1000px"
    :before-close="handleClose"
    :modal-append-to-body="true"
    :append-to-body="true"
  >
    <el-card>
      <el-row slot="header" class="header">
        <el-col :span="12" style="text-align: left;">已上传文件列表</el-col>
        <el-col :span="12" style="text-align: right;">
          <FileUpBtn v-model="signFileId" file-key="FlowSignFile" :is-save="true" :is-show-files="false" :link-biz-pk="itemId" @change="loadFile">
            <template slot="trigger" slot-scope="e">
              <el-button size="mini" type="success">上传文件</el-button>
            </template>
          </FileUpBtn>
        </el-col>
      </el-row>
      <w-table
        :data="files"
        :columns="columns"
        row-key="FileId"
        :is-select="true"
        :select-keys="chioseKey"
        :is-paging="false"
        @selected="selected"
      >
        <template slot="action" slot-scope="e">
          <el-button v-if="e.row.LinkBizPk == itemId" type="danger" size="mini" icon="el-icon-delete" circle @click="dropFile(e.row)" />
        </template>
      </w-table>
    </el-card>
    <div slot="footer" style="text-align: center; margin-top: 20px">
      <el-button type="primary" @click="save">确定</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { GetFiles } from '@/flow/api/flowAudit'
import FileUpBtn from '@/components/fileUp/FileUpBtn.vue'
import { deleteFile } from '@/api/base/file'
export default {
  components: {
    FileUpBtn
  },
  props: {
    logId: {
      type: String,
      default: null
    },
    itemId: {
      type: String,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      files: [],
      chioseKey: [],
      signFileId: null,
      columns: [{
        key: 'FileName',
        title: '文件名',
        align: 'left',
        minWidth: 200
      }, {
        key: 'UpEmp',
        title: '上传人',
        align: 'center',
        width: 150
      }, {
        key: 'NodeName',
        title: '上传节点',
        align: 'center',
        width: 200
      }, {
        key: 'Extension',
        title: '扩展名',
        align: 'center',
        width: 100
      }, {
        key: 'Action',
        title: '操作',
        align: 'left',
        slotName: 'action',
        width: 120
      }]
    }
  },
  computed: {
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.chioseKey = []
          this.loadFile()
        }
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    async loadFile() {
      const res = await GetFiles(this.logId)
      this.files = res
    },
    selected(e) {
      this.chioseKey = e.keys
    },
    async save() {
      if (this.chioseKey.length === 0) {
        this.$message({
          type: 'success',
          message: '请选择文件!'
        })
        return
      }
      const key = this.chioseKey[0]
      const file = this.files.find(c => c.FileId === key)
      this.$emit('update:visible', false)
      this.$emit('save', file)
    },
    dropFile(row) {
      const title = '确认删除文件 ' + row.FileName + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.FileId)
      })
    },
    async submitDrop(id) {
      await deleteFile(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      const index = this.files.findIndex(c => c.FileId === id)
      this.files.splice(index, 1)
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style scoped>
.header {
    height: 30px;
    line-height: 30px;
}
</style>
